<template>
  <div class="recommend-mv">
    <div class="mv-item" v-for="item in mvList" :key="item.id">
      <img :src="item.cover" alt="">
      <h5 class="mv-name">{{item.name}}</h5>
      <h5 class="author">{{item.artistName}}</h5>
      <div class="icon-wrap"><span class="iconfont iconbofang1"></span></div>
      <div class="play-count">
        <span class="iconfont iconbofang1">
          {{item.playCount|handleCount}}</span>
      </div>
      <!-- formatTime是全局过滤器 -->
      <div class="duration">{{item.duration | formatTime}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mvList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  filters: {
    handleCount(val) {
      // 次数若超过1万，则写成多少万的形式
      if (val > 10000) {
        return parseInt(val / 10000) + '万'
      } else {
        return val
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend-mv {
  display: flex;
  flex-wrap: wrap;
  width: 110%;
  padding-left: 10px;
  // overflow: hidden;
  .mv-item {
    position: relative;
    width: 250px;
    margin: 15px 20px 10px 0;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
    &:hover {
      .icon-wrap {
        opacity: 0.8;
      }
    }
    img {
      width: 100%;
      border-radius: 5px;
    }
    h5 {
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mv-name {
      margin-top: 5px;
    }
    .author {
      margin-top: 8px;
      color: #666;
    }
    .icon-wrap {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      line-height: 40px;
      text-align: center;
      background-color: #fff;
      opacity: 0;
      transition: opacity 0.7s;
      .iconbofang1 {
        position: relative;
        top: 0;
        left: 2px;
        color: #dd6d60;
      }
    }
    .play-count {
      position: absolute;
      top: 0;
      width: 100%;
      padding-top: 3px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
      text-align: right;
      .iconbofang1 {
        margin-right: 5px;
        color: #fff;
        font-size: 14px;
      }
    }
    .duration {
      position: absolute;
      right: 8px;
      bottom: 50px;
      color: #fff;
      opacity: 0.9;
    }
  }
}
</style>